import { RouteProps, Route, Link, useHistory } from "react-router-dom";
import React, { lazy, useState } from "react";
import { Menu } from "antd";

import SubMenu from "antd/lib/menu/SubMenu";
import Login from "../pages/login";
import LayoutComponent from "../pages/layout";
import WrongWay from "../pages/wrongWay";
import Dashboard from "../pages/dashboard";
import UserList from "../pages/userList";
import PicList from "../pages/picList";
import PicClassify from "../pages/picClassify";
import Album from "../pages/album";


export interface IRoute extends RouteProps {
  CName?: any; // react规定自定义组件首字母大写
  routes?: IRoute[];
  name: string;
  meta: {
    permission?: string;  // 权限
    menu?: boolean;  // 菜单是否显示
    key?: string
  }
}

const childRoutes: IRoute[] = [
  {
    path: "/",
    name: 'Dashboard',
    exact: true,
    meta: {
      menu: true,
      key: 'dashboard'
    },
    CName: Dashboard,
  },
  {
    path: "/user",
    name: '用户管理',
    exact: true,
    meta: {
      menu: true,
      key: 'userManager'
    },
    routes: [
      {
        path: '/user/list',
        CName: UserList,
        name: '用户列表',
        exact: true,
        meta: {
          menu: true,
          key: 'userList'
        },
      },
      // {
      //   path: '/user/level',
      //   CName: userList,
      //   name: '用户等级',
      //   meta: {
      //     menu: true,
      //     key: 'userLevel'
      //   },
      // }
    ]
  },
  {
    path: "/pic",
    name: '图片管理',
    meta: {
      menu: true,
      key: 'pic'
    },
    routes: [
      {
        path: '/pic/list',
        CName: PicList,
        name: '图片列表',
        meta: {
          menu: true,
          key: 'picList'
        },
      },
      {
        path: '/pic/classify',
        CName: PicClassify,
        name: '图片分类',
        exact: true,
        meta: {
          menu: true,
          key: 'classify'
        },
        routes: [

        ]
      },
      {
        path: '/pic/classify/classify_album/:id/:type/:title',
        CName: Album,
        name: '分类相册',
        exact: true,
        meta: {
          key: 'classify_album'
        },
      },
      {
        path: '/user/list/author_album',
        CName: Album,
        name: '作者相册',
        meta: {
          key: 'author_album'
        },
      },
      {
        path: "/404",
        name: 'error',
        exact: true,
        meta: {
          key: 'error'
        },
        CName: WrongWay,
      },
    ]
  },
]

export const routes: IRoute[] = [
  {
    path: "/login",
    CName: Login,
    name: '登录',
    meta: {
      key: 'login'
    }
  },
  {
    path: "/",
    name: 'layout',
    exact: false,
    CName: LayoutComponent,
    routes: childRoutes,
    meta: {
      key: 'layout'
    }
  },
];

const onClick = (handler: any) => {
  console.log(handler)
}

// 找到某一个路由信息
export function findOneRouter(url: string, routes: IRoute[] = childRoutes, recieve: any = {}): any {
  for (let i = 0; i < routes.length; i++) {
    const item = routes[i]

    if (item.path && item.path.indexOf(url) > -1) {
      console.log(item.path, url)
      return item
    }
    if (item.routes) {
      recieve = findOneRouter(url, item.routes)
    }
    if (recieve && Object.keys(recieve).length > 0) {
      return recieve
    }
  }
}

// 渲染路由
export function mapRoutes(routes: IRoute[]) {
  return routes.map(({ path, exact, CName, routes, meta }) => {
    if (CName) {
      return <Route path={path} exact={exact} render={(props) =>
        <CName {...props} routes={routes}></CName>} key={meta?.key}></Route>
    } else if (routes && routes.length > 0) {
      return routes.map(({ path, exact, CName }) => <Route path={path} exact={exact} component={CName}></Route>)
    }
  })
}

// 找到所有菜单路由
export function findAllMenuRouter(routes: IRoute[] = [...childRoutes]): IRoute[] {
  return routes.filter(item => item.meta.menu).map(x => {
    x = Object.assign({}, x)
    if (x.routes) {
      x.routes = findAllMenuRouter(x.routes)
    }
    return x
  })
}

// 渲染菜单
export function RenderMenu() {
  const history = useHistory()
  const [path] = useState<string>(history.location.pathname)
  const menus = findAllMenuRouter()
  console.log(menus)
  const renderChildren = (routes: IRoute[]): any[] => {
    return routes.map(item => {
      if (item.routes && item.routes.length > 0) {
        return <SubMenu title={item.name} key={item.path as string}>{renderChildren(item.routes)}</SubMenu>
      } else {
        return <Menu.Item title={item.name} key={item.path as string}>
          <Link to={item.path as string}>{item.name}</Link>
        </Menu.Item>
      }
    })
  }
  return <Menu theme="dark" mode="inline" defaultSelectedKeys={[path]} onClick={onClick}>
    {
      renderChildren(menus)
    }
  </Menu>
}

export default mapRoutes;
